.swiper_box{
    overflow: hidden;
    .hed{
        display: block;
        margin:10px 10px;
        height: 16px;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url(./img/hed.png);
    }
    .swiper_wrap{
        display: block;
        height: 200px;
        position: relative;
        overflow: hidden;
        .mask{
            position: absolute;
            top:0;
            bottom:0;
            background-color: black;
            opacity: 0.5;
        }
        .left_mask{
            left:0;
        }
        .right_mask{
            right:0;
        }
        &>.after,&>.before{
            zoom:0.75;
            display: block;
            opacity: 0.4;
            position: absolute;
            content: " ";
            width: 40px;
            height: 40px;
            border-radius: 50%;
            top: 50%;
            background-color: black;
            margin-top: -15px;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 12px;
        }
        &>.after{
            right: 16px;
            background-image: url(./img/right.png);
        }
        &>.before{
            left: 16px;
            background-image: url(./img/left.png);

        }
        .itemSwiper{
            position: relative;
            display: block;
            float: left;
            .editSerial{
                position: absolute;
                bottom: 0;
                top:0;
                right:0;
                left:0;
                display: flex;
                display: -webkit-box;
                align-items: center;

                -webkit-align-items: center;
                justify-content: center;
                -webkit-justify-content: center;

                .se{
                    font-size:24px;
                    text-align: center;
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: green;
                    color: white;
                    line-height:30px;
                    opacity: 0.5;
                }
            }
            img{
                width: 100%;
                height:100%
            }
        }
        .swiper_items{
            position: absolute;
            top:0;
            bottom:0;
            left:0;

            .item{
                position: relative;
                &>.after,&>.before{
                    display: none;
                }
                &.active{

                }
                img{
                    height: 100%;
                    width: 100%;
                }
                height: 200px;
                width: 350px;
                margin-right:10px;
                display: inline-block;
                background-color: #e0e0e0;
            }
        }
    }
    .bot_items{
        margin:10px auto;
        overflow: hidden;
        //background-color:blue;
        .item{
            background-color:#f6f6f6;
            //background-color:yellow;
            overflow: hidden;
            &:last-child{
                margin-right:0px;
            }
            .pic{
                height:110px;
                overflow: hidden;
                padding:0px;
                .img{
                    height: 100%;
                    width: 100%;
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: contain;
                }
            }
            .info{
                line-height: 16px;
                text-align: center;
                font-size:12px;
                span{
                    display: inline-block;
                    overflow: hidden;
                    height:14px;
                }
                nobr{
                    max-width: 84px;
                    padding-top:2px;
                    overflow: hidden;
                    display: inline-block;
                }
                b{
                    color:#f60103;
                    display: inline-block;
                    font-weight: 700;
                }
            }
        }
    }
}

.right-enter {
    transform: translate(100%);
}
.right-enter.right-enter-active {
    transform: translate(0%);
    transition: transform 200ms ease-in-out;
}
.right-leave {
    transform: translate(0%);
}
.right-leave.right-leave-active {
    transform: translate(-100%);
    transition: transform 200ms ease-in-out;
}

.left-enter {
    transform: translate(-100%);
}
.left-enter.left-enter-active {
    transform: translate(0%);
    transition: transform 200ms ease-in-out;
}
.left-leave {
    transform: translate(0%);
}
.left-leave.left-leave-active {
    transform: translate(100%);
    transition: transform 200ms ease-in-out;
}

.fade-enter {
    opacity: 0.01;
}
.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
}
.fade-leave {
    opacity: 1;
}
.fade-leave.fade-leave-active {
    opacity: 0.01;
    transition: opacity 80ms ease-in;
}